<template>
    <el-container class="layout" direction="vertical">
        <el-header style="padding: 0">
            <toolbar :productId="productId" @preview="handlePreview" @save="handleSave"></toolbar>
        </el-header>
        <el-container class="content">
            <el-aside width="300px">
                <cmptBar :pointer="pointer"></cmptBar>
            </el-aside>
            <el-main class="main">
                <phone-panel ref="phonePanel" :preview="preview" :pointer="pointer"></phone-panel>
            </el-main>
            <el-aside width="380px">
                <settingsbar></settingsbar>
            </el-aside>
        </el-container>
    </el-container>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import Toolbar from './components/toolbar.vue';
import CmptBar from './components/cmptBar/index.vue';
import PhonePanel from './components/phonePanel/index.vue';
import Settingsbar from './components/settingsbar.vue';
import { getProduct, updateProduct } from '@/api/iot/product';

export default {
    name: 'Layout',
    components: {
        Toolbar,
        CmptBar,
        PhonePanel,
        Settingsbar,
    },
    computed: {
        ...mapState({
            id: (state) => state.dragEditor.id,
            pageSetup: (state) => state.dragEditor.pageSetup,
            pageComponents: (state) => state.dragEditor.pageComponents,
        }),
    },
    data() {
        return {
            preview: { show: false }, // 预览（对象关闭后才可以打开）
            pointer: { show: false }, // 穿透
            productId: '',
            deviceType: '',
            panelModelsJson: '',
        };
    },
    mounted() {
        const id = this.$route.query.id;
        const deviceType = this.$route.query.deviceType;
        this.productId = id ? id : '';
        this.deviceType = deviceType ? deviceType : '';
        this.getProductData();
    },
    methods: {
        ...mapActions('dragEditor', ['setPageSetup', 'setPageComponents', 'setCurrentproperties', 'setRightcom']),
        // 获取产品信息
        getProductData() {
            getProduct(this.productId).then((res) => {
                if (res.code === 200) {
                    if (res.data.panelModelsJson !== '' && res.data.panelModelsJson !== null) {
                        this.panelModelsJson = JSON.parse(res.data.panelModelsJson);
                        const { templateJson, component } = this.panelModelsJson;
                        this.setPageSetup(JSON.parse(templateJson));
                        this.setPageComponents(JSON.parse(component));
                        this.setCurrentproperties(JSON.parse(templateJson));
                        this.setRightcom('decorate');
                    }
                }
            });
        },

        handlePreview() {
            this.preview.show = true;
        },
        // 保存
        handleSave() {
            console.log(this.pageSetup);
            const data = JSON.stringify({
                productId: this.id,
                name: this.pageSetup.name,
                templateJson: JSON.stringify(this.pageSetup),
                component: JSON.stringify(this.pageComponents),
            });
            console.log(data);
            let form = {
                productId: this.productId,
                panelModelsJson: data,
                deviceType: this.deviceType,
            };
            updateProduct(form).then((response) => {
                console.log(response);
                if (response.code === 200) {
                    this.$modal.alertSuccess('保存成功');
                }
            });
        },
    },
};
</script>

<style lang="less" scoped>
.layout {
    width: 100%;
    height: 100%;

    .content {
        width: 100%;
        height: 100%;
        overflow: hidden;

        .main {
            padding: 0;
        }
    }
}
</style>
